import React from 'react'
import { Outlet, useNavigate } from 'react-router-dom'
import { TabBar } from 'antd-mobile'
import {
    AppOutline,
    UserOutline,
    UnorderedListOutline
  } from 'antd-mobile-icons'
function Tabbar() {
    const navigate=useNavigate()
  return (
    <div>
     <Outlet/>
     <div>
     <TabBar  style={{position:'fixed', width:'100%', bottom:'0', background:'#ccc'}}  onChange={(key)=>navigate(key)}>
        <TabBar.Item key={'/'} icon={<AppOutline/>} title={'首页'}></TabBar.Item>
        <TabBar.Item key={'/my'} icon={<UserOutline/>} title={'我的'}></TabBar.Item>
        <TabBar.Item key={'/list'} icon={<UnorderedListOutline/>} title={'列表'}></TabBar.Item>
     </TabBar>
     </div>
    </div>
  )
}

export default Tabbar